<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>shou_yi_wang_zhan</title>
    <link rel="stylesheet" href="bootstrap-4.5.0/dist/css/bootstrap.css">
    <script src="JS/jquery-3.2.1.js"></script>
    <script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js"></script>
    <script src="bootstrap-4.5.0/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="owl.carousel/owl.carousel.css" rel="stylesheet">
    <link href="owl.carousel/owl.theme.css" rel="stylesheet">
    <script src="JS/jquery-3.2.1.js"></script>
    <script src="owl.carousel/owl.carousel.js"></script>
</head>
<body>
<div class="container-fluid m-0 p-0 ">
    <!-- 第一部分-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-8 text-left text-center ">
                <i class="fa fa-user"></i>　
                <a href="#">Login</a>　
                <i class="fa fa-pencil"></i>　
                <a href="#">Register</a>　
                <i class="fa fa-cart-plus"></i>　
                <a href="#">Checkout</a>　
            </div>
            <div class="col-12 col-md-4 text-right text-center">
                <i class="fa fa-heart"></i>　
                <a href="#">Wishlist</a>　
                <i class="fa fa-angle-down"></i>　
                <a href="#">USD</a>　
            </div>
        </div>
    </div>
    <!-- 第二部分-->
    <div class="tu m-0 p-0">
        <div class="jumbotron jumbotron-fluid text-white d-flex align-items-center m-0 p-0">
            <div class="container">
                <div class="container kuai">
                    <div class="row">
                        <div class="col-12 col-md-auto text-center">
                            <img src="images/logo.png">
                        </div>
                        <div class="col-12  col-md-4 ml-auto  form-group ">
                            <input class="form-control" type="text" placeholder="search... ">
                            <button class="btn an_niu">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第三部分-->
    <nav class="navbar navbar-expand-lg navbar-light pt-0 pb-0">
        <a class="navbar-brand " href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-lg-center" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item ">
                    <a class="nav-link p-3" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="services.html">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="#">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="#">Bolg</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="#">Shop</a>
                </li>
                <li class="nav-item mr-lg-auto">
                    <a class="nav-link p-3" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 第四部分-->
    <div class="container da_div  p-5">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="xiao_tu">
                    <img src="images/about.jpg" class="img-2">
                </div>
            </div>
            <div class="you col-12 col-md-6 text-left">
                <h4><span class="yang">Welcome To Hand Made</span></h4>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
                </p>
                <p>Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
                <button type="button" class="btn btn-danger" data-toggle="">READ MORE</button>
            </div>
        </div>
    </div>
    <!-- 第五部分-->
    <div class="baijing3">
        <div class="row">
            <div class="col-12 col-md-4"></div>
            <div class="col-12 col-md-8">
                <div class="px-5 py-2 mr-0">
                    <div id = "accordion">
                        <h4 class="mt-4"><span class="zi2"> Why</span> Choose Us</h4>
                        <div class="card mt-4">
                            <div class="card-header shou_feng">
                                <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapseOne"> Respecting Your Time<span>
                                  </span></p>
                            </div>
                            <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                <div class="card-body shou_feng_yeng">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                    tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                    elit, sed do eiusmod tempor incididunt ut labore et dolore
                                </div>
                            </div>
                        </div>
                        <div class="card mt-4">
                            <div class="card-header shou_feng">
                                <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse2">Latest In Technology<span></span></p>
                            </div>
                            <div id="collapse2" class="collapse" data-parent="#accordion">
                                <div class="card-body shou_feng_yeng">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                    tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                    elit, sed do eiusmod tempor incididunt ut labore et dolore
                                </div>
                            </div>
                        </div>
                        <div class="card mt-4">
                            <div class="card-header shou_feng">
                                <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse3">Professional Staff<span></span></p>
                            </div>
                            <div id="collapse3" class="collapse" data-parent="#accordion">
                                <div class="card-body shou_feng_yeng">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                    tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                    elit, sed do eiusmod tempor incididunt ut labore et dolore
                                </div>
                            </div>
                        </div>
                        <div class="card mt-4">
                            <div class="card-header shou_feng">
                                <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse4"> Free Home Dilevery<span></span>
                                </p>
                            </div>
                            <div id="collapse4" class="collapse" data-parent="#accordion">
                                <div class="card-body shou_feng_yeng">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                    tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                    elit, sed do eiusmod tempor incididunt ut labore et dolore
                                </div>
                            </div>
                        </div>
                        <div class="card mt-4">
                            <div class="card-header shou_feng">
                                <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse5">High Quality<span> </span>
                                </p>
                            </div>
                            <div id="collapse5" class="collapse " data-parent="#accordion">
                                <div class="card-body shou_feng_yeng">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                    tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                    elit, sed do eiusmod tempor incididunt ut labore et dolore
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第六部分-->
    <div class="container-fluid m-0 p-0" id="tupian1">
        <div class="jumbotron2 jumbotron-fluid">
            <div class="container">
                <h1 class="text-center pt-5"><a id="zi">Our</a><a id="zi4">Happy　Customers</a> </h1>
                <div class="row">
                    <div class="container col-4 text-center">
                        <img src="images/customer1.png">
                        <h5 class="zi">Hilpton Broad</h5>
                        <p class="zi4">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
                    </div>
                    <div class="container col-4 text-center">
                        <img src="images/customer2.png">
                        <h5 class="zi">Stive Philips</h5>
                        <p class="zi4">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
                    </div>
                    <div class="container col-4 text-center">
                        <img src="images/customer3.png">
                        <h5 class="zi">James Carlo</h5>
                        <p class="zi4">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第七部分-->
    <div class="container-fluid feng_se col-12 ">
        <h3 class="py-5 text-center text-white">Our Clients</h3>
        <div class="container">
            <div id="owl-demo" class="owl-carousel py-3">
                <a class="item"><img src="images/partner1.png" alt=""/></a>
                <a class="item"><img src="images/partner2.png" alt=""></a>
                <a class="item"><img src="images/partner3.png" alt=""></a>
                <a class="item"><img src="images/partner4.png" alt=""></a>
                <a class="item"><img src="images/partner5.png" alt=""></a>
                <a class="item"><img src="images/partner1.png" alt=""></a>
                <a class="item"><img src="images/partner2.png" alt=""></a>
                <a class="item"><img src="images/partner3.png" alt=""></a>
                <a class="item"><img src="images/partner4.png" alt=""></a>
                <a class="item"><img src="images/partner5.png" alt=""></a>
                <a class="item"><img src="images/partner1.png" alt=""></a>
                <a class="item"><img src="images/partner2.png" alt=""></a>
                <a class="item"><img src="images/partner3.png" alt=""></a>
                <a class="item"><img src="images/partner4.png" alt=""></a>
                <a class="item"><img src="images/partner5.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 第八部分-->
    <div class="da_div2 yang_se5">
        <div class="container">
            <div class="row py-5">
                <div class="col-12 col-md-6 col-lg-3">
                    <img src="images/logo.png">
                    <p class="zi6">It is a long established fact that a reader will be distracted by the readable
                        content of a page when looking at its layout.</p>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <h5 class="zi2">Help</h5>
                    <p class="zi6">Find Your Beer</p>
                    <p class="zi6">Customer Service</p>
                    <p class="zi6">Contact</p>
                    <p class="zi6">Recent Orders</p>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <h5 class="zi2">Links</h5>
                    <p class="zi6">Home</p>
                    <p class="zi6">Shop</p>
                    <p class="zi6">404 Page</p>
                    <p class="zi6">Login</p>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <h5 class="zi2">Our Information</h5>
                    <p class="zi6">787 Lakeview St. Marion, NC 28752 </p>
                    <p class="zi6">+1800123654789 </p>
                    <p class="zi6">+1800123456788 </p>
                    <p class="zi6">Support@Handmade.Net</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 第九部分-->
    <div class="zui_ho feng2">
        <div class="row">
            <div class="col-12 col-md-6 text-center ">
                <p class="zi6">Copyrights © 2018 All Rights <span class="text-primary">Reserved</span> by Himanshusofttech</p>
            </div>
            <div class="col-12 col-md-6 text-right zui2 text-center zi6">
                <a href="#" class="zi6"><i class="fa fa-facebook"></i></a>
                <a href="#" class="zi6"><i class="fa fa-twitter mr-2"></i></a>
                <a href="#" class="zi6"><i class="fa fa-google-plus mr-2"></i></a>
                <a href="#" class="zi6"><i class="fa fa-pinterest-p mr-2"></i></a>
                <a href="#" class="zi6"><i class="fa fa-linkedin mr-2"></i></a>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $('#owl-demo').owlCarousel({
            item:2,
            autoPlay:1000,
            navigation:false,
            pagination: false,
            itemsDesktop:false,
            itemsDesktopSmall: false,
            itemsTablet: [580,1],
            itemsTabletSmall: false,
            itemsMobile: false
        })
    });
</script>
<script type="text/javascript">
    window.onscroll = function (event) {
        var shang = document.documentElement.scrollTop
        var oDiv = document.getElementsByClassName("navbar-nav")[0];

        if (shang > 300){
            oDiv.style.position = "fixed";
            oDiv.style.top = "0px"
        }
        else{
            oDiv.style.position = "relative";
            oDiv.style.top = "";
        }
    }
</script>
</html>